<!--
 * @Author: lihaonan
 * @Date: 2024-09-26 14:24:26
 * @LastEditors: 毕晨曦 
 * @LastEditTime: 2024-11-16 20:20:57
 * @Description: 请填写简介
-->
<template>
  <view class="content">
    <u-form :model="model" ref="form1">
      <u-form-item
        label="真实姓名:"
        prop="userInfo.relName"
        borderBottom
        ref="item1"
        labelWidth="140"
      >
        <u-input v-model="model.relName" border="none"></u-input>
      </u-form-item>
      <u-form-item
        label="联系方式:"
        prop="userInfo.relTel"
        borderBottom
        ref="item1"
        labelWidth="140"
      >
        <u-input v-model="model.relTel" border="none"></u-input>
      </u-form-item>
      <u-form-item
        label="报名人数:"
        prop="userInfo.signNumber"
        borderBottom
        ref="item1"
        labelWidth="140"
      >
        <u-radio-group v-model="model.signNumber" placement="row" size="36">
          <u-radio
            :customStyle="{ marginRight: '8px' }"
            v-for="(item, index) in radiolist1"
            :key="index"
            :label="item.name"
            :name="item.value"
            :labelSize="30"
          >
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item
        label="活动费用:"
        prop="userInfo.weight"
        borderBottom
        ref="item1"
        labelWidth="140"
      >
        365/人
      </u-form-item>
      <view class="erweima">
        <image
          src="../../static/img/erweima.jpg"
          style="width: 100%; height: 800rpx"
          mode="aspectFill"
        ></image>
      </view>
    </u-form>
    <view class="button pt-45">
      <view class="to-btn" @click="saveHobby">提交信息</view>
    </view>
  </view>
  <u-popup :show="show" @close="show = false">
    <view
      style="height: 480rpx; padding-top: 60rpx; margin: 0 auto"
      class="px-40"
    >
      <view style="font-weight: 700; text-align: center; margin-bottom: 10rpx">
        上传截图
      </view>
      <u-upload
        :fileList="fileList"
        name="1"
        :maxCount="1"
        width="76"
        height="76"
        @afterRead="afterReadPoint"
      >
        <image
          :src="IMG_URL + model.receipt"
          style="width: 200rpx; height: 200rpx"
          v-if="model.receipt"
        ></image>
        <view
          style="
            border: 6px solid #9fb5eb;
            width: 300rpx;
            height: 300rpx;
            text-align: center;
            margin: 0 auto;
          "
        >
          <image
            src="../../static/img/add-photo.png"
            style="width: 200rpx; height: 200rpx; margin-top: 50rpx"
            v-if="!model.receipt"
          ></image>
        </view>
      </u-upload>
      <view style="padding-top: 40rpx">
        <u-button text="确定" color="#81d8d0" @click="submit"></u-button>
      </view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { addActSign } from "@/api/swiper";
const IMG_URL = import.meta.env.VITE_BASE_URL_IMG;
const list = ref();
const fileList = ref();
const show = ref(false);
const model = ref({
  actId: "",
  relName: "",
  relTel: "",
  signNumber: "",
  receipt: "",
});
const radiolist1 = reactive([
  {
    name: "1人",
    value: "1",
  },
  {
    name: "2人",
    value: "2",
  },
  {
    name: "3人",
    value: "3",
  },
]);
const saveHobby = () => {
  show.value = true;
};
// 收集点照片上传
const afterReadPoint = async (res: any) => {
  let a = uni.uploadFile({
    url: import.meta.env.VITE_BASE_URL + "/common/upload",
    filePath: res.file.url,
    name: "file",
    header: {
      Authorization: uni.getStorageSync("token"),
    },
    formData: {
      file: "file",
    },
    success: (res) => {
      setTimeout(() => {
        let dataing = JSON.parse(res.data);
        model.value.receipt = dataing.fileName;
      }, 1000);
    },
  });
};
// 提交信息
const submit = async () => {
  uni.showLoading({ title: "提交中" });
  const { code } = await addActSign(model.value);
  if (code !== 200) return;
  uni.hideLoading();
  uni.navigateTo({
    url: `/pages/swiper/index?`,
  });
};
onLoad((option) => {
  if (!option) return;
  list.value = JSON.parse(decodeURIComponent(option.data));
  console.log(list.value);

  model.value.actId = list.value.actId;
});
</script>
<style lang="scss">
.content {
  // width: 90%;
  padding: 0 30rpx;
  height: 1580rpx;
  margin: 0 auto;
  background: #fff;
  box-shadow: 5px 5px 5px #cdcfcf;
}

.button {
  .to-btn {
    width: 536rpx;
    height: 84rpx;
    background: linear-gradient(86deg, #eb97b0, #f5c9d2);
    border-radius: 42rpx 42rpx 42rpx 42rpx;
    text-align: center;
    line-height: 84rpx;
    margin: auto;
    margin-top: 43rpx;
    color: #fff;
    font-weight: 400;
    font-family: "PingFang SC-Bold, PingFang SC";
    font-size: 28rpx;
  }
}

.erweima {
  margin: 30rpx auto;
}
</style>
